<template>
  <!-- 留言登录 -->
 
  <el-form
    :model="loginForm"
    :rules="rules"
    ref="loginForm"
    label-width="100px"
  >
    <el-form-item label="用户名" prop="user">
      <el-input v-model="loginForm.user"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input :type="passed" v-model="loginForm.password"></el-input>
      <span class="iconfont icon-Eyesclosed eyedown" v-show="queflag" @click="yuanb2"></span>
      <span class="iconfont icon-icon-eye-open eyeup" v-show="!queflag" @click="yuanz2"></span>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="loginSubmit">登录</el-button>
      <el-button @click="resetForm('loginForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {mapMutations} from "vuex";
export default {
  name: "BlogLogo",
  data() {
    return {
      passed:"password",
      queflag:true,
      loginForm:{
        //表单的数据对象
        user: "",
        password: "",
      },
      rules: {
        //表单的验证规则，  与标签中的prop属性值对应
          user: [
          //trigger:'blur'表示光标离开再触发
          { required: true, message: "请输入用户名"},
          { //rule当前规则对象，  value表示绑定的input的value值， callback表示表单校验完成
            validator(rule, value, callback){
              // callback();不传值不表示校验成功
              // callback(new Error("传入校验不成功"));传值就是校验不成功

              // 1，校验用户名长度
              if(value.length <2 ||value.length>8){
                // 如果校验失败就不继续执行了
                 return callback(new Error("请输入2 ~ 8位字符"));
              };
              // 2，字符验证，正则表达式 匹配中文，英文字母和数字及_:
              if(/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(value)){
                callback();//符合规则校验成功
              }else{
                callback(new Error("用户名由中英文及数字_组成"));
              };
            },
          }
        ],
        password: [
          {required: true,message: "请输入密码",trigger:"blur"},
          {  
            validator(ruler, value, callback){
              // 1，校验密码的长度
              if(value.length <6 || value.length >18 ){
                return callback(new Error("请输入6 ~ 18位密码"));
              };
              // 2，校验密码字符验证，正则表达式
              if(/^[a-zA-Z]\w{5,17}$/.test(value)){
                callback(); //校验成功
              }else{
                callback(new Error("以字母包含字符数字下划线"));
              };
          
            }
          }
        ],
      },
    }
  },
  methods: {
    loginSubmit() {
     //点击登录提交表单,发起请求
     this.$refs.loginForm.validate(async (bool) =>{
       if(bool){
         //表单数据校验成功
           let {data} = await this.$axios({ //发起请求属于异步操作，用async处理，await等待出结果
            method:"POST",  //post请求方式
            url:"/login",    //发起请求地址
            data:{ //发送数据写在这里
            // 发送用户名和密码
              user:this.loginForm.user,
              password:this.loginForm.password,
            }
         });
        //  console.log(data);
         if(data.code == 1){
           //如果是等于1
            this.$message.warning(data.message);
         }else if(data.code == 0){
          // 如果等于0
             this.$message.success(data.message);
             this.$refs.loginForm.resetFields();//表单重置
              // 将响应过来的用户数据存到vuex里面
             this.updateUserInfo(data.data);
            // console.log(data);

         }else if(data.code == 3){
            // 如果等于3
             this.$message.error(data.message);
         }

       }else{
         return false;
       }
     })
    },
    resetForm(formName) {
      //重置表单
      this.$refs[formName].resetFields();
    },
     yuanb2() {
      this.passed = "text";
      this.queflag = false;
    },
    yuanz2() {
      this.passed = "password";
      this.queflag = true;
    }, 
    // 使用vuex里的updateUserInfo()方法
    ...mapMutations(["updateUserInfo"]),
  },

};
</script>

<style lang="less" scoped>

// 表单部分
.el-input {
  // text-align: center;
  width: 150px;
}
/deep/ .el-form {
  width: 500px;
  text-align: center;
  margin: 0 auto;
}
/deep/ .el-form-item__label {
  text-align: left;
}
.el-form-item:nth-child(5) /deep/ .el-form-item__label {
  padding-left: 12px;
}
.el-form-item /deep/ .el-form-item__content {
  flex: 0 !important;
}
.el-form {
  text-align: center;
}
.el-form-item__content .el-textarea /deep/ .el-textarea__inner {
  display: block;
  width: 315px;
  height: 120px;
  resize: none;
}
.el-form /deep/ .el-form-item:last-child {
  display: inline-block;
  width: 300px;
  padding-left: 0;
}
.el-form .el-form-item:last-child /deep/ .el-form-item__content {
  margin-left: 0 !important;
  width: 116% !important;
}
.el-form-item .el-form-item__content /deep/ .el-button--primary {
  padding-right: 50px;
  display: block;
}
.el-form-item__content .el-input /deep/ .el-input__inner {
  width: 150px !important;
}
.el-form-item .el-form-item__content /deep/ .el-input[data-v-484c1c11] {
  width: 150px;
}
.el-input {
  position: relative;
  // width: 240px;
}
.el-form-item__content .eyedown,
.el-form-item__content .eyeup {
  position: absolute;
  top: 0px;
  right: 4px;
  cursor: pointer;
}
/deep/ .el-input__inner {
  padding: 0 20px 0 15px;
}
</style>